<template>
  <Drawer :title="title" v-model="drawShow" :closable='true' :transfer='false' width="720" id='draw-commodity'>
    <div>
      <Row type='flex' align='middle' style="padding: 23px;">
        <Col><span>商品名称：</span></Col>
        <Col>
          <Input placeholder="请输入" v-model='couponName' style="width: 180px;margin-left: 10px" :maxlength='20'></Input>
        </Col>
        <Col class="search-item">
          <Button type='primary' class="btn" style="margin-left: 24px;" @click='doSearch'>查询</Button>
        </Col>
        <Col class="search-item">
          <Button class="btn" style="margin-left: 24px;" @click='reset'>重置</Button>
        </Col>
      </Row>
      <Table class="table-list" :columns="columns" :data="tableData" :height="tableHeight" highlight-row @on-current-change='changeSelect'>
        <template slot-scope="{ row }" slot="skuName">
          <span>{{row.skuName?row.skuName:row.couponName?row.couponName:''}}</span>
        </template>
        <template slot-scope="{ row }" slot="goodsUnit">
          <span>{{row.goodsUnit === 0 ? '个' : row.goodsUnit === 1 ? '枚' : row.goodsUnit === 2 ? '份' : ''}}</span>
        </template>
        <template slot-scope="{ row }" slot="iconPath">
          <div style="margin: 15px 0;">
            <img :src="row.thumbnail ? row.thumbnail : row.iconPath ? row.iconPath : defaultUrl" alt="" style="width: 60px;height: 60px;display: block;">
          </div>
        </template>
      </Table>
      <Row type='flex' justify="end" style='padding: 20px'>
        <Col>
          <Page :total="pageObj.total"
                :page-size='pageObj.pageSize'
                :current='pageObj.pageIndex'
                :page-size-opts='[20,50,100,200]'
                show-total
                show-sizer
                @on-change='changePageIndex'
                @on-page-size-change='changePageSize' />
        </Col>
      </Row>
    </div>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 16px" class="btn" @click='drawShow = false'>取消</Button>
      <Button type="primary" class="btn" @click='sureSelect'>确定</Button>
    </div>
  </Drawer>
</template>

<script>
import { couponList, sysGoodsList } from '@/api/commondity/index'
export default {
  computed: {
    tableHeight () {
      let height = this.tableData.length > 5 ? 585 : 0
      return height
    }
  },
  watch: {
    value (val) {
      this.drawShow = val
    },
    drawShow (status) {
      if (!status) {
        this.selectRow = {}
        this.pageObj.pageIndex = 1
        this.pageObj.pageSize = 20
        this.pageObj.couponName = ''
        this.couponName = ''
        this.$emit('closeDraw', status)
      } else {
        if (this.type === '0') {
          this.getList()
        } else {
          this.getRetailList()
        }
        if (this.selectList.length > 0) {
          this.selectRow = this.selectList[0]
        }
      }
    }
  },
  props: {
    selectList: {
      type: Array,
      default: () => []
    },
    matchClassify: {
      type: String,
      default: '0'
    },
    title: {
      type: String,
      default: '兑换商品列表'
    },
    type: {
      type: String,
      default: '1'
    },
    value: {
      type: Boolean
    }
  },
  methods: {
    doSearch () {
      this.pageObj.pageIndex = 1
      this.pageObj.couponName = this.couponName
      if (this.type === '0') {
        this.getList()
      } else {
        this.getRetailList()
      }
    },
    reset () {
      this.selectRow = {}
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.pageObj.couponName = ''
      this.couponName = ''
      if (this.type === '0') {
        this.getList()
      } else {
        this.getRetailList()
      }
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      if (this.type === '0') {
        this.getList()
      } else {
        this.getRetailList()
      }
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      if (this.type === '0') {
        this.getList()
      } else {
        this.getRetailList()
      }
    },
    changeSelect (currentRow, oldCurrentRow) {
      this.selectRow = currentRow
    },
    sureSelect () {
      let arr = Object.keys(this.selectRow)
      if (arr.length === 0) {
        this.$Message.error('请选择商品')
      } else {
        this.drawShow = false
        this.$emit('sureSelect', [this.selectRow])
      }
    },
    // 获取兑换列表
    getList () {
      couponList({
        merchantId: this.$store.state.user.merchantId,
        couponType: this.matchClassify,
        couponName: this.pageObj.couponName,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    },
    // 获取零售商品列表
    getRetailList () {
      sysGoodsList({
        merchantId: this.$store.state.user.merchantId,
        sysId: 'xsxt',
        sysGoodsStatus: 0,
        skuName: this.pageObj.couponName,
        goodsKind: '03-0304',
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data ? result.data.goods : []
          this.pageObj.total = result.data ? result.data.total : 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  created () {
    if (this.type === '0') {
      this.columns = this.columnsDraw.splice(0, 3)
    } else {
      this.columns = this.columnsDraw
    }
  },
  data () {
    return {
      defaultUrl: require('@/assets/images/default.png'),
      couponName: '',
      tableData: [],
      pageObj: {
        couponName: '',
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      drawShow: false,
      selectRow: {},
      columns: [],
      columnsDraw: [
        {
          title: ' ',
          key: 'select',
          align: 'center',
          width: 80,
          render: (h, params) => {
            let cla = ['ivu-radio']
            if ((params.row.couponId && this.selectRow.couponId && params.row.couponId === this.selectRow.couponId) ? true : !!((params.row.skuId && this.selectRow.skuId && params.row.skuId === this.selectRow.skuId))) {
              cla = ['ivu-radio', 'ivu-radio-checked']
            }
            return h(
              'span',
              {
                class: cla
              },
              [
                h('span', {
                  class: ['ivu-radio-inner']
                })
              ]
            )
          }
        },
        {
          title: '商品图片',
          slot: 'iconPath'
        },
        {
          title: '商品名称',
          slot: 'skuName'
        },
        {
          title: '商品编码',
          key: 'skuId'
        },
        {
          title: '商品条码',
          key: 'barcode'
        },
        {
          title: '单位',
          slot: 'goodsUnit'
        },
        {
          title: '数量',
          key: 'goodsNum'
        }
      ]
    }
  }
}
</script>

<style lang="less">
#draw-commodity{
  .demo-drawer-footer{
    width: 720px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .ivu-drawer-body {
    padding: 0 !important;
  }
}
</style>
